ReactJS计算器应用：增加功能

来源: GeeksforGeeks

在前一篇文章中，我们搭建了计算器应用的基本用户界面，但尚未实现任何交互功能或样式。目前，当你点击任何按钮时，屏幕上不会显示任何输入。本篇教程将教你如何让计算器应用完全功能性地运行，之后再加入CSS进行美化。

首先，我们将实现按钮的点击事件处理。为此，需要在Calculator组件中定义一个名为handleClick的方法。考虑到数字键（0-9）、运算符键（如 +, -, *, /）以及功能键（如 =, 清除, 删除）各自有不同的作用，我们可以通过在handleClick方法中使用switch-case语句来区分不同按钮的行为。

在开始编码之前，先确定应用需要哪些状态变量。对于这个项目，我们需要两个状态变量：

• expression：初始化为空字符串，用于保存用户的输入表达式。
• result：同样初始化为空字符串，用于展示表达式的计算结果。

在Calculator.js文件中，于Calculator类的构造函数内添加如下代码以初始化上述状态变量：

constructor(props) {
  super(props);
  this.state = {
    expression: '',
    result: ''
  };
  this.handleClick = this.handleClick.bind(this);
}

接下来，完善handleClick方法，确保它能根据不同类型的按钮点击更新状态。具体实现如下：

handleClick(event) {
  const value = event.target.value;
  switch (value) {
    case '=':
      try {
        const result = eval(this.state.expression);
        this.setState({ result: result.toString(), expression: '' });
      } catch (error) {
        this.setState({ result: 'Math Error', expression: '' });
      }
      break;
    case 'Clear':
      this.setState({ expression: '', result: '' });
      break;
    case 'Delete':
      this.setState({ expression: this.state.expression.slice(0, -1) });
      break;
    default:
      this.setState({ expression: this.state.expression + value });
  }
}

为了使点击事件生效，还需要在Button组件中绑定handleClick方法。具体做法是在调用Button组件时通过props传递handleClick方法，并将其赋值给按钮的onClick事件处理器。

最后一步是确保输出屏幕能够显示当前的状态。这需要修改OutputScreen及其子组件OutputScreenRow，使它们能够接收并显示来自父组件Calculator的状态数据。

以下是更新后的outputscreen.js文件：

import React from 'react';
import OutputScreenRow from './outputScreenRow';

const OutputScreen = (props) => (
  

    
    
  

);

export default OutputScreen;

以及outputscreenrow.js文件：

import React from 'react';

const OutputScreenRow = (props) => (
  

    
  

);

export default OutputScreenRow;

现在，你的ReactJS计算器应该能够正常工作了，与最初的静态界面相比有了显著的功能提升。下一步将是为其添加样式，使界面更加美观。